@page "/docs/columns/options"
@layout DocLayout

<Title>列选项(Column options)</Title>
<Subtitle Size="Size.Size4">
    设计不同类型的栅格布局
</Subtitle>
<hr>


<Title Size="Size.Size4" IsSpaced>
    垂直对齐(Vertical alignment)
</Title>
<Content>
    <p>如果想要列要垂直对齐列, 将 <code>IsVcentered</code> 修饰器添加到 <code>Columns</code> 容器即可.</p>
</Content>

<DocView ComType="Options1"></DocView>

<hr>

<Title Size="Size.Size4" IsSpaced>
    多行(Multiline)
</Title>
<Content>
    <p>当你想换行时，你可以闭合 <code>Columns</code> 容器，然后开始新的一行，您也可以在容器上通过增加 <code>IsMultiline</code> 修饰符，来增加 <strong>更多</strong>
        <code>Column</code> 元素。</p>
</Content>
<DocView ComType="Options2"></DocView>
<hr>

<Title Size="Size.Size4" IsSpaced>
    居中列(Centering columns)
</Title>
<Content>
    <p>
        虽然您可以通过 <em>空列</em>（例如<code>&lt;Column &gt;&lt;/Column&gt;</code>）来创建一个水平居中的 <code>Column</code> 元素。当然您也可以通过在
        <code>Columns</code> 父元素上添加 <code>IsCentered</code>修饰符 来实现:
    </p>
</Content>

<DocView ComType="Options3"></DocView>
<Content>
    <p>
        与 <code>IsMultiline</code>一起使用来创建一个灵活的居中列表。（尝试改变窗口大小来查看区别）
    </p>
</Content>

<DocView ComType="Options4"></DocView>